<template>
    <!-- 移动端适配测试页面 -->
    <!-- <div v-for="item in iconData" :key="item.ad_position_id">

        <img :src="item.img_url" alt="" width="150" height="150">
    </div> -->
    <van-grid :border="false" :column-num="5" icon-size="100px">
        <van-grid-item v-for="item in iconData" :to="({ name: 'home', query: {id:1} })">
            <van-image :src="item.img_url" />
        </van-grid-item>
        <van-grid-item v-for="item in iconData" :url="item.action.path">
            <van-image :src="item.img_url" />
        </van-grid-item>

    </van-grid>
</template>

<script setup>
import { onMounted ,ref} from 'vue';
//引入axios
import axios from 'axios'
const iconData = ref([])
onMounted(() => { 
    geticonApi()
})

//创建函数
const geticonApi = () => { 
    console.log('移动端适配测试页面')
    // 从m站获取icon快捷键的数据
    axios.get("https://apis.netstart.cn/xmsc/home/page").then(res => { 
        console.log(res.data.data.data.sections[1].body.items)
        iconData.value = res.data.data.data.sections[1].body.items

    }).catch(error => { 
        console.log(error.message);
        
    }).finally(() => { 
        console.log("无论是否报错都会执行");
        
    })
}
</script>

<style lang="scss" scoped>

</style>